
class Ense {
    constructor() {
        this.init();
        this.evnt();
    }
    //固定数据的储存
    init() {
        //获取外层大盒子
        this.box = $mj('container')
        //获取大盒子的外间距
        this.boxMargin_l = this.box.offsetLeft;
        this.boxMargin_t = this.box.offsetTop;
        //获取左侧相框
        this.box_left = this.box.querySelector('.small-box')
        //左侧相框的宽高
        this.box_leftW = this.box_left.offsetWidth;
        this.box_leftH = this.box_left.offsetHeight;
        //左侧小图
        this.box_leftImg = this.box_left.querySelector('#small-img')
        // 左侧遮盖层
        this.box_leftColor = this.box_left.querySelector('.yellow-box');
        //左侧最大移动距离<this.box_leftColor_w
        this.box_leftColor_w = this.box_leftW - parseInt(getComputedStyle(this.box_leftColor)['width']);
        this.box_leftColor_h = this.box_leftH - parseInt(getComputedStyle(this.box_leftColor)['height']);
        //获取右侧相框
        this.box_right = this.box.querySelector('.big-box')
        //右侧图片
        this.box_rightImg = this.box_right.querySelector('#big-img');
        //获取图片列表外层div
        this.box_listIv = this.box.querySelector('.img-list')
        //获取ul列表li
        this.box_list = this.box_listIv.querySelectorAll('li');

        // 图片数据 : 
        this.img_list = [{
            small: "http://img.5lux.com.cn/511/avatar/2014/06/26/14037501529135.jpg",
            big: "http://img.5lux.com.cn/511/avatar/2014/06/26/14037501499323.jpg"
        }, {
            small: "http://img.5lux.com.cn/511/avatar/2014/06/26/14037501499323.jpg",
            big: "http://img.5lux.com.cn/511/avatar/2014/06/26/14037501499323.jpg"
        }];
    }
    //绑定事件
    evnt() {
        // 左侧相框鼠标移入事件
        on(this.box_left, 'mouseenter', function () {
            this.show();
        }.bind(this))
        //鼠标移出事件
        on(this.box_left, 'mouseleave', function () {
            this.hide();
        }.bind(this))
        //鼠标元素内移动事件
        on(this.box_left, 'mousemove', function (e) {
            var e = e || event;
            this.follor(e); //此处的e是实参
        }.bind(this))
        //图片列表点击事件
        for (let i = 0; i < this.img_list.length; i++) {
            //此事件注册给ul下的li
            on(this.box_list[i], 'click', function (index) {
                this.changeImg(index); //调用的点击事件的函数
            }.bind(this, i)) //此处this指向点击事件，不是实例化对象
        }
    }
    //绑定事件之执行函数
    // 1，移入事件
    show() {
        //左侧遮罩
        this.box_leftColor.style.display = 'flex';
        //右侧相框
        this.box_right.style.display = 'block'
    }
    // 2，移出事件
    hide() {
        //左侧遮罩
        this.box_leftColor.style.display = 'none';
        //右侧相框
        this.box_right.style.display = 'none'
    }
    
    // 3，元素内移动事件 #
    follor(e) { //此处的e作为接受数据的形参
        console.log($("html,body").scrollTop());
        
        var x = e.pageX - this.boxMargin_l - this.box_leftColor_w / 2;
        var y = e.pageY - this.boxMargin_t - this.box_leftColor_h / 2;
        //判定边界值
        x = x <= 0 ? 0 : x;
        y = y <= 0 ? 0 : y;
        //--右侧，下边框
        x = x >= this.box_leftColor_w ? this.box_leftColor_w : x;
        y = y >= this.box_leftColor_h ? this.box_leftColor_h : y;
        //移动起来
        this.box_leftColor.style.left = x + 'px';
        this.box_leftColor.style.top = y + 'px';

        //来吧大图动起来<移动参数为，小图的移动距离/小图的最大移动距离
        //小图100米 每次走10 ==0.1 比列就是小图走0.1米大图走10米
        var mox = x / this.box_leftColor_w * 100;
        var moy = y / this.box_leftColor_h * 100;


        this.box_rightImg.style.left = -mox + '%'
        this.box_rightImg.style.top = -moy + '%';
    }
    //列表点击事件
    changeImg(index) {
        //下面代码存储的数组中对应的对象
        let date = this.img_list[index];
        console.log(date);

        // 更换小图大图路径
        this.box_leftImg.src = date.small; //date对象中的small
        this.box_rightImg.src = date.big;
    }
}
// 实例化对象
let ense = new Ense("周杰伦", "告白气球");